<template>
  <div class="hello">
    <div  @click="clean()">
    一键清理 </div>
    <ul v-for="fileName in fileList" :key="fileName">
      <li>
        <a
          :href="'http://127.0.0.1:8081/public/' + fileName"
          target="_blank"
        >
          {{fileName}}
        </a>
      </li>
    </ul>

    <form @submit.prevent="submitFile">
    <input type="file" name="image" size="50" @change="tirggerFile($event)"/>
    <br />
    <input type="submit" value="上传文件" />
    </form>

  </div>
</template>

<script>
import { getFiles, uploadFiles, cleanFiles } from '../api/getData'
export default {
  name: 'HelloWorld',
  data () {
    return {
      fileList: [],
      fileInput: '',
      subFile: '',
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted () {
    this.readFileList()
  },
  methods: {
    show () {
      this.readFileList()
    },
    submitFile () {
      this.submitFiles()
      // action="http://127.0.0.1:8081/file_upload" method="post" enctype="multipart/form-data"
    },
    tirggerFile (event) {
      this.subFile = event.target.files
    },
    async readFileList () {
      const res = await getFiles()
      this.fileList = res.data
    },
    async submitFiles () {
      let formData = new FormData()
      formData.append('image', this.subFile[0])
      formData.append('act', 'upload_file')
      await uploadFiles(formData)
      this.show()
      // const res = await getFileList()
      // console.log(res.data[0])
    },
    async clean () {
      await cleanFiles()
      this.show()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
